import React, { useState, useRef, useEffect } from 'react';
import { useIntl, FormattedMessage, useAccess, history, useModel } from '@umijs/max';
import { Button, message, Modal, Dropdown, FormInstance, Space, Switch, Tag, Row, Col, Card, Typography, Collapse, Image } from 'antd';
import { ActionType, FooterToolbar, PageContainer, ProColumns, ProFormInstance, ProFormSelect, ProTable, QueryFilter } from '@ant-design/pro-components';
import { PlusOutlined, EditOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined } from '@ant-design/icons';

import { getAssetList,addAsset, updateAsset, removeAsset, getDeviceNumsByName, getdeviceNames} from '@/services/manage/asset';
import dayjs from 'dayjs';
import Paragraph from 'antd/lib/typography/Paragraph';
const { Panel } = Collapse;


const AssetTable: React.FC = () => {

  const [messageApi, contextHolder] = message.useMessage();
  const { initialState } = useModel('@@initialState');
  const [deviceNums, setDeviceNums] = useState<string[]>([]);
  const currentUser = initialState?.currentUser; 
  const formRef = useRef<ProFormInstance>();
  const [deviceNames, setDeviceNames] = useState<string[]>([]);
  const [device, setDevice] = useState<API.Manage.Asset>();

  const access = useAccess();

  /** 国际化配置 */
  const intl = useIntl();

  const fakeScenes = Array.from({ length: 6 }, (_, i) => ({
    id: i + 1,
    timestamp: `2025-06-10 10:0${i}`,
    location: `区域-${i + 1}`,
    device: `DEV2025000${i+1}`,
    pointCloudUrl: 'https://via.placeholder.com/400x200?text=点云图预览', // 可替换为真实点云渲染组件
  }));

//获取设备名称
  const allDeviceNames = async () =>{
    try{
    if(access.hasPerms('inspection:asset:allDeviceName')){
        const deviceNames = await getdeviceNames();
        const deviceNameList = Array.isArray(deviceNames?.rows) ? deviceNames.rows : [];
        setDeviceNames(deviceNameList);
    }
    }
    catch(error){
    message.error('获取设备名称失败:');
    setDeviceNames([]);
    }
  }
    useEffect(() => {
        allDeviceNames();
    }, []);




  const columns: ProColumns<API.Manage.Asset>[] = [
    {
      title: "资产编号" ,
      dataIndex: 'assetId',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
      sorter: (a, b) => a.assetId - b.assetId,
      defaultSortOrder: 'descend',
    },
    {
      title: "设备名称" ,
      dataIndex: 'deviceName',
      valueType: 'text',
      align: 'center',
      // hideInSearch: true,
    },
    {
      title: "设备编号",
      dataIndex: 'deviceNum',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "IP地址",
      dataIndex: 'ipAddress',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "设备类型" ,
      dataIndex: 'deviceType',
      valueType: 'text',
      align: 'center',
      hideInSearch: true,
    },
    {
        title:"在线状态",
        dataIndex: 'isOnline',
        valueType: 'select',
        align: 'center',
        valueEnum:  {
            0: { text: '离线', status: 'error' },
            1: { text: '在线', status: 'success' }
          },
        render: (_, record) => {
            return (
            <Switch
                checked={record.isOnline === 1}
                checkedChildren="在线"
                unCheckedChildren="离线"
                defaultChecked
            />)
        }
    },
    {
      title: "网络状态",
      dataIndex: 'networkStatus',
      valueType: 'select',
      align: 'center',
      valueEnum: {
        0: { text: '异常', status: 'error' },
        1: { text: '正常', status: 'success' },
      },
      render: (_, record) => {
        // 定义状态映射
        const statusMap : Record<number, { color: string; text: string }>= {
          0: { color: 'red', text: '异常' },
          1: { color: 'green', text: '正常' },
        };
        return (
          <Tag color={statusMap[record.networkStatus].color}>
            {statusMap[record.networkStatus].text}
          </Tag>
        );
      },
    },
    {
      title: "电池电量" ,
      dataIndex: 'batteryLevel',
      valueType: 'progress',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "最后在线时间",
      dataIndex: 'lastOnline',
      valueType: 'dateTime',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        const formattedTime = record.lastOnline 
          ? dayjs(record.lastOnline).format('YYYY-MM-DD HH:mm:ss')
          : '-';
        return <span>{formattedTime}</span>;
      },
    },
    {
      title: "创建时间" ,
      dataIndex: 'createTime',
      valueType: 'dateTime',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        const formattedTime = record.createTime 
          ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
          : '-';
        return <span>{formattedTime}</span>;
      },
    },
    {
      title: "更新时间" ,
      dataIndex: 'updateTime',
      valueType: 'dateTime',
      align: 'center',
      hideInSearch: true,
      render: (_, record) => {
        const formattedTime = record.updateTime 
          ? dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')
          : '-';
        return <span>{formattedTime}</span>;
      },
    }, 
  ];

  return (
    <PageContainer>
      {contextHolder}     
      
    </PageContainer>
  );
};

export default AssetTable;